import router from '@/router'
import store from '@/store' // 引入store实例 和组件中的this.$store是一回事
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

const whiteList = ['/login', '/404']

// 路由守卫 前置守卫
// next是前置守卫必须执行的函数 next必须执行，如果不执行，那么无须权限就可以访问所有的页面
// next() 放过通行 
// next(false) 强制终止跳转
// next(地址) 强制跳转到某个地址
router.beforeEach(async (to, from, next) => {
    NProgress.start() // 开启进度条的意思
    if (store.getters.token) {
        // 如果有token
        if (to.path === '/login') {
            // 如果访问的是登录页 那就强制跳转到主页
            next('/')
        } else {
            // 只有放过的时候才去获取用户资料
            // 如果当前vuex中有用户资料的ID 表示已经有资料 就不需要获取了 如果没有ID才需要获取
            if (!store.getters.userId) {
                // 如果没有ID才表示用户资料没有获取过
                await store.dispatch('user/getUser')
            }
            next()
        }
    } else {
        if (whiteList.some(value => value == to.path)) {
            // 如果some方法返回true，表示要去的地址在白名单,那么就放行
            next()
        } else {
            next('/login')
        }
    }
    NProgress.done() // 解决手动切换地址时  进度条的不关闭的问题
});

// 后置守卫
router.afterEach(() => {
    NProgress.done() // 关闭进度条
})